<template>
  <div class="container">
    <div class="left-bar">
      <div class="user-info">
        <div class="user-image"></div>
        <div class="user-info-ms">
          <div class="user-info-title"><span>Song</span></div>
          <div class="user-info-describe"><span>Good Evening</span></div>
        </div>
      </div>
      <div>
        <movie-item-card></movie-item-card>
      </div>
    </div>
    <div class="content">
      <top-bar>
        <div class="top_bar">
          <search-view :data="data"></search-view>
          <theme :data=themes></theme>
        </div>
      </top-bar>
      <div class="movie">
        <div class="movie-window">
          <div class="movie-title">
            <span>爱的二八定律</span>
          </div>
          <div class="movie-info">
            <span>杨幂/许凯</span>
            <span>偶像爱情</span>
          </div>
          <div class="movie-describe">
            <span>"杨幂许凯御姐宅男蜜恋"</span>
          </div>

          <div class="movie-player-btn">
            <img src="@/assets/icons/outline-player.png" alt="">
            <span>
               播放正片
            </span>

          </div>

          <div class="movie-hot-list list-x">
            <div class="movie-hot-card" v-for="i in movie" :key="i">
              <div class="movie-hot-card-image" :style="{backgroundImage:`url(${i.imgUrl})`}">

              </div>
<!--              <div class="movie-hot-card-name">-->
<!--                {{ i.name }}-->
<!--              </div>-->
            </div>
          </div>
        </div>
        <div class="movie-live">
          <div class="label">
            <div class="name"><span>你正在追</span></div>
            <a class="more" href="#">more</a>
          </div>
          <div class="movie-list list">
            <movie-card v-for="i in movie" :key="i.id" :data="i"></movie-card>
          </div>
        </div>
      </div>


    </div>
  </div>
</template>

<script lang="ts" setup>
import TopBar from "@/components/top-bar.vue"
import SearchView from "@/components/search.vue"
import Theme from "@/components/theme.vue"
import MovieItemCard from "@/components/movie-item-card.vue"
import MovieCard from "@/components/movie-card.vue"
import { reactive} from "vue";
import {themes} from "@/config/data";
import movieJson from "@/assets/data/movie.json"


const movie = movieJson
const data = reactive<Array<string>>(['hello', 'world'])
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-column-gap: 10px;

  .content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 10px;

    .movie {
      flex: 1;
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-rows: 6fr 4fr;
      grid-row-gap: 15px;

      .movie-window {
        width: 96%;
        height: 100%;
        margin: 10px;
        border-radius: 20px;
        position: relative;
        background-image: url("@/assets/images/0.jpg");
        background-size: 100% 100%;
        box-shadow: rgba(0, 0, 0, 0.19) 0 10px 20px, rgba(0, 0, 0, 0.23) 0 6px 6px;

        .movie-title {
          color: white;
          position: absolute;
          bottom: 120px;
          left: 20px;
          z-index: 10;
        }

        .movie-info {
          color: white;
          position: absolute;
          bottom: 90px;
          left: 20px;
          z-index: 10;
        }

        .movie-describe {
          color: white;
          position: absolute;
          bottom: 65px;
          left: 60px;
          z-index: 10;

        }

        .movie-player-btn {
          background-color: rgba(255, 255, 255, 0.5);
          position: absolute;
          border-radius: 25px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          width: 150px;
          cursor: pointer;
          height: 50px;
          bottom: 10px;
          left: 150px;
          z-index: 10;

          img {
            margin-right: 10px;
            width: 20px;
            height: 20px;
          }

          span {
            font-size: 16px;
          }
        }

        .movie-player-btn:hover {
          box-shadow: inset rgba(255, 255, 255, 0.6) 3px 3px 3px, inset rgba(255, 255, 255, 0.6) -3px -3px 3px;
        }

        .movie-hot-list {
          width: 55%;
          height: 30%;
          position: absolute;
          display: grid;
          grid-template-columns: repeat(5,1fr);
          gap: 5px;
          flex-wrap: wrap;
          padding: 0 5px;
          bottom: 5px;
          right: 20px;

          .movie-hot-card:hover{
            transform: scale(1.1);
          }

          .movie-hot-card {
            width: 100%;
            height: 100%;
            display: block;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;

            .movie-hot-card-image {
              width: 100%;
              height: 100%;
              border-radius: 5px;
              overflow: hidden;
              background-size: 100%;
              background-repeat: no-repeat;
              background-position: center;
            }

            .movie-hot-card-name {
              font-size: 10px;
              color: white;
              opacity: 1;
            }
          }

          .movie-hot-card:hover {
            opacity: 1;
          }
        }

      }

      .movie-live {
        width: 99%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        .movie-list {
          width: 100%;
          display: grid;
          grid-template-columns: repeat(5,1fr);
          gap: 10px;
          align-items: center;
          flex: 1;
        }

      }
    }

  }

  .left-bar {
    flex: 2;
    padding: 10px 5px;
    background: rgba(0, 0, 0, 0.5);
  }
}

.top_bar {
  display: flex;
  width: 100%;
  -webkit-app-region: drag; //设置可拖拽，但是要在子组件不需要拖到的地方取消，不然会失焦
  align-content: center;
  justify-content: space-evenly;
}

.user-info {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px 5px;

  .user-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid white;
    background-image: url("@/assets/images/pic_5ijxAKSAYKErWtalMemh2.jpg");
    background-size: 80px 80px;
    background-position: center;
  }

  .user-info-ms {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    color: white;
    height: 80px;
    margin-left: 15px;
    align-items: start;

    .user-info-title {
      font-size: 30px;
      font-weight: bold;
    }

    .user-info-describe {
      font-size: 16px;
    }
  }
}


</style>